<template>
  <div class="content">
    <div class="warpper">
      <div class="main">
        <CardHead>
          <template slot="title">纪录</template>
          <template slot="desc">问题之多,脑子不够用,就记下来吧</template>
        </CardHead>
        <div class="dmItem" v-for="item in recordData" :key="item.id">
          <label class="dmiHeader">{{ item.rtitle }}</label>
          <label class="dmiContent">{{ item.rcontent }}</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";
import config from "../../../utils/config";
@Component({
  head() {
    return {
      title: "记录",
    };
  },
  async asyncData({ app }) {
    const res = await app.$axios.$get(config.BASE_URL + "/api/record/list");
    return {
      recordData: res.d,
    };
  },
})
export default class extends Vue {
  recordData: Array<any> = [];
  created() {}
}
</script>
<style scoped>
.dmItem {
  /* height: 5em; */
  margin-top: 1em;
  background: rgba(26, 51, 64, 0.85);
}
label.dmiHeader {
  padding-left: 1em;
  height: 2em;
  line-height: 2em;
  display: block;
  background: rgba(214, 229, 253, 0.38);
  color: #fff;
}
.dmiContent {
  padding: 0.5em;
  display: block;
  color: #dee6f3;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
